<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<script src="js/jquery-3.2.1.min.js"></script>
<!--bootstrap库-->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/bootstrap/bootstrap.min.js"></script>
	<script src="js/bootstrap.js"></script>
<!-- 页面事件响应 -->
<script type="text/javascript" src="js/payorder.js"></script>

<!-- 地址选择 -->
<script type="text/javascript" src="js/jsAddress.js"></script>

<link rel="stylesheet" href="css/payorder.css" type="text/css"/>
<title>订单确认页面</title>
</head>
<body>
	        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    
                    <button type="button" class="navbar-toggle show pull-left" data-target="sidebar">
                        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                    </button>
                    
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                    </button>
                    
                    <a class="navbar-brand" href="showMerchants">外卖订餐系统</a>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="showMerchants">首页</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-expanded="false"><i class="fa fa-user fa-fw"></i>&nbsp;${client.cname}&nbsp;<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="toorderlist">订单列表</a></li>
                                <li><a href="toaddress">配送地址管理</a></li>
                                <li><a href="tologout">退出登录</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                
            </div>
        </nav>
        
            <div class="main">
                
                <!--商家名-->
                <div class="page-header">
                  <h1 style="text-align: center">${merchant.mname}</h1>
                </div>
                
                <!--订单状态-->
                
                <div class="jumbotron">
                  <div class="container">
                    <h3>订单详情</h3>
                    <p>请仔细核对订单信息</p>
                  </div>
                </div>
                
                
                <!--订单详情-->
                <div>

                    <!--选择收货地址-->
                    <div>
                        <form class="form-inline" style="margin-bottom:30px;">
	                        <span>请选择收货地址</span>
	                        
		                        <!-- 显示收货地址 遍历收货地址 -->
		                        <select name="addr" id="addr-select" class="form-control">
		                            
		                            <c:forEach items="${addrlist }" var="a">
		                            	<option name="${a.did }">收件人： <span name="contact">${a.contact }</span> 联系电话: <span name="tel">${a.tel }</span> 配送地址： <span name="addr">${a.addr }</span></option>
		                            </c:forEach>
		                        </select>
	                        
	                        <input id="newaddr" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" value="新增收货地址"/>
                        </form>
                    </div>
                    
                    
                    <!--新增收货地址模态框-->
                    <div id="mymodal"class="modal fade" tabindex="-1" role="dialog">
                      <div class="modal-dialog" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">新增地址</h4>
                          </div>
                          
                          <div class="modal-body">
                          
                            <form id="addrform" method="POST">
                                
                                <div class="input-group">
                                  <span class="input-group-addon" id="sizing-addon2">收货人</span>
                                  <input type="text" name="contact" class="form-control" placeholder="请输入您的姓名" aria-describedby="sizing-addon2">
                                </div>

                                <div class="input-group">
                                  <span class="input-group-addon" id="sizing-addon2">手机号</span>
                                  <input type="text" name="tel" class="form-control" placeholder="配送员联系您的电话" aria-describedby="sizing-addon2">
                                </div>

                                <div class="input-group">
                                  <span class="input-group-addon" id="sizing-addon2">收货地址</span>
                                  <select id="cmbProvince" name="cmbProvince"></select>  
			                        <select id="cmbCity" name="cmbCity"></select>  
			                        <select id="cmbArea" name="cmbArea"></select>
                                </div>

                                <div class="checkbox">
                                  <label>
                                    <input type="checkbox"> 设为默认地址
                                  </label>
                                </div>
                            </form>

                              <div class="modal-footer">
                                <a type="button" href="tolastpage" class="btn btn-default" data-dismiss="modal">取消</a>
                                <button id="save-btn" type="button" class="btn btn-primary">保存设置</button>
                              </div>
                            </div><!-- /.modal-content -->
                          </div><!-- /.modal-dialog -->
                        </div><!-- /.modal -->
                    </div>
                </div>
                
                <!--菜品列表及相关信息-->
                <div>
                    <ul class="list-group">
                    	<c:forEach items="${infolist }" var="o">
                    		<li class="list-group-item">
		                        <div class="media">
		                          <div class="media-left media-middle">
		                            <a href="#">
		                              <img width="120px" height="100px"   class="media-object" src="${o.food.fimg }" alt=" ${o.food.fname }">
		                            </a>
		                          </div>
		                          <div class="media-body">
		                            <h4 class="media-heading">${o.food.fname }</h4>
		                            <p><span class="price-type">价格</span><span class="detail-price">×${o.count}
		                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		                            	 ￥${o.food.fprice}</span></p>
		                            
		                          </div>
		                        </div>  
		                      </li>
                    	</c:forEach>
                    
                    
                    </ul>
                    <div>
                       
                        <p style="text-align: right; font-size: 20px">共付：<span style="color: red;font-size: 30px">￥${sum}</span></p>
                    </div>
                </div>
                
                <div class="right-btn" style="font-size: 20px">
                	<input type="hidden" id="icnum" value="${merchant.icnum }">
                    <a type="button" href="tocart" class="btn btn-info btn-lg">再看看</a>
                    <button id="payorder" class="btn btn-success btn-lg">确认支付</button>  
                </div>
            
        </div>
        
        <script type="text/javascript">
        	addressInit('cmbProvince', 'cmbCity', 'cmbArea');
        	//新增地址模态框
        </script>
</body>
</html>